class RingChartComponent extends HTMLElement {
    constructor() {
        super();
        this._shadow = this.attachShadow({ mode: 'closed' });

        this._chartDiv = document.createElement('div');
        this._chartDiv.style.width = '100%';
        this._chartDiv.style.height = '100%';
        this._shadow.appendChild(this._chartDiv);

        this.chart = echarts.init(this._chartDiv);
    }

    connectedCallback() {
        const title = this.getAttribute('title') || '单环饼图';
        const titleColor = this.getAttribute('title-color') || '#000';
        const label = this.getAttribute('data-label') || '完成';
        const value = Number(this.getAttribute('data-value')) || 70;
        const total = Number(this.getAttribute('total-value')) || 100;
        const color = this.getAttribute('color') || '#5470C6';
        const bgColor = this.getAttribute('bg-color') || '#e0e0e0';

        const option = {
            title: {
                text: title,
                left: 'center',
                top: '10%',
                textStyle: {
                    color: titleColor,
                    fontSize: 16
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} ({d}%)'
            },
            series: [
                {
                    name: label,
                    type: 'pie',
                    radius: ['60%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        position: 'center',
                        formatter: `${value}/${total}`,
                        fontSize: 18,
                        color: color
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 22
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: value, name: label, itemStyle: { color } },
                        { value: total - value, name: '未完成', itemStyle: { color: bgColor } }
                    ]
                }
            ]
        };

        this.chart.setOption(option);
        this.resizeChart();

        window.addEventListener('resize', this._resizeHandler = this.resizeChart.bind(this));

        if (ResizeObserver) {
            this._observer = new ResizeObserver(() => this.resizeChart());
            this._observer.observe(this.parentElement);
        }
    }

    disconnectedCallback() {
        window.removeEventListener('resize', this._resizeHandler);
        if (this._observer) {
            this._observer.disconnect();
        }
    }

    resizeChart() {
        if (this.chart) {
            this.chart.resize();
        }
    }

    getChartInstance() {
        return this.chart;
    }
}

customElements.define('ring-chart', RingChartComponent);
